<template>
  <div class="button">
    <h4>按钮类型</h4>
    <FanButton v-for="type, index of types" :key="type" :type="type">{{dataType[index]}}</FanButton>
    <h4>按钮尺寸</h4>
    <FanButton v-for="size, index of sizes" :key="size" :size="size">{{dataSize[index]}}</FanButton>
    <h4>禁用状态</h4>
    <FanButton v-for="type, index of types" :key="type" :type="type" disabled>{{dataType[index]}}</FanButton>
    <h4>按钮组</h4>
    <FanButtonGroup>
      <FanButton v-for="size, index of sizes" :key="size" type="primary">{{dataGroup[index]}}</FanButton>
    </FanButtonGroup>
    <h4>按钮形状</h4>
    <FanButton v-for="shape, index of shapes" :key="shape" :shape="shape">{{dataShape[index]}}</FanButton>
    <h4>加载按钮</h4>
    <FanButton loading>默认按钮</FanButton>
  </div>
</template>

<script>
import FanButton from '../components/button/button.vue'
import FanButtonGroup from '../components/button/button-group.vue'
export default {
  components: { FanContainer, FanButton, FanButtonGroup, },
  data(){
    return {
      types: [ 'default', 'primary', 'danger', 'text' ],
      sizes: [ 'large', 'medium', 'small' ],
      shapes: [ 'default', 'round' , 'circle', ],
      dataType: ['默认', '主要', '危险', '文字', ],
      dataSize: ['大按钮', '中等按钮', '小按钮', ],
      dataGroup: ['左按钮', '中间按钮', '右按钮', ],
      dataShape: ['默认按钮', '圆角按钮', '圆', ],
    }
  },
}
</script>

<style>

</style>